<script setup lang="ts">
import { getCaptchaImage, register } from "@/api/admin/login"
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSpace,
  ElButton,
  ElCheckbox,
  ElLink,
  ElMessage,
} from "element-plus";
import { onMounted, ref } from "vue";
const emit = defineEmits(["changeForm"]);

const changeForm = () => {
  emit("changeForm");
};

const formData = ref({
  phone: "",
  account: "",
  password: "",
  confirmPassword: "",
  // verificationCode: "",
  agree: false,
  uuid: "",
  code: "",
})

const registerRef = ref();


const captchaImage = ref("");

// 获取验证码
const getCaptchaImageClick = async ()=>{
  // console.log("获取验证码");
 const res = await getCaptchaImage();
 captchaImage.value = res.data.data;
 formData.value.uuid = res.data.uuid;
//  console.log(res);
}

onMounted(() => {
  getCaptchaImageClick();
});

// 注册
const onRegister = async () => {
  await registerRef.value.validate();
  if (!formData.value.agree) {
    return ElMessage.info("请同意用户协议");
  }

  if (formData.value.password !== formData.value.confirmPassword) {
    return ElMessage.info("两次密码不一致");
  }

  const ret = await register(formData.value);
  if (ret.code === 200) {
    ElMessage.success("注册成功");
    changeForm();
    registerRef.value.resetFields();
  } else {
    // console.log(ret);
    ElMessage.error(ret.data.msg);
  }
};

</script>

<template>
  <ElForm ref="registerRef" :model="formData" label-position="left" label-width="auto">
    <h3 style="text-align: center;margin-bottom: 10px;">{{ $t('login.register') }}</h3>
    <ElFormItem prop="account" :rules="[{ required: true, message: '请输入用户名' }]" :label="$t('login.username')">
      <ElInput v-model="formData.account" :placeholder="$t('login.usernamePlaceholder')" />
    </ElFormItem>
    <ElFormItem prop="phone" :rules="[{ required: true, message: '请输入手机号' }]" label="手机号">
      <ElInput v-model="formData.phone" placeholder="请输入手机号" />
    </ElFormItem>
    <ElFormItem prop="password" :rules="[{ required: true, message: '请输入密码' }]" :label="$t('login.password')">
      <ElInput v-model="formData.password" type="password" :placeholder="$t('login.passwordPlaceholder')" />
    </ElFormItem>
    <ElFormItem prop="confirmPassword" :rules="[{ required: true, message: '请输入确认密码' }]"
      :label="$t('login.confirmPassword')">
      <ElInput v-model="formData.confirmPassword" type="password"
        :placeholder="$t('login.confirmPasswordPlaceholder')" />
    </ElFormItem>
    <ElFormItem :label="$t('login.verificationCode')" :rules="[{ required: true, message: '请输入确认密码' }]">
      <div style="display: flex;">
        <ElInput v-model="formData.code" :placeholder="$t('login.PleaseEnterTheVerificationCode')" />
        <div class="captchaImage" @click="getCaptchaImageClick" v-html="captchaImage"></div>
      </div>
    </ElFormItem>
    <ElSpace :size="10" style="width: 100%;" :fill="true" direction="horizontal">
      <ElSpace style="display:flex;">
        <ElCheckbox v-model="formData.agree">{{ $t('login.IAgree') }}</ElCheckbox>
        <ElLink :underline="false" type="primary">《{{ $t('login.userAgreement') }}》</ElLink>
      </ElSpace>
      <ElButton @click="onRegister" type="primary">{{ $t('login.register') }}</ElButton>
      <ElButton @click="changeForm">{{ $t('login.haveAccountGoLogin') }}</ElButton>
    </ElSpace>
  </ElForm>
</template>

<style lang="less" scoped>

.captchaImage {
  width: 150px;
  cursor: pointer;
  border: 1px solid #ccc;
}
</style>